<template>
  <div>
    <!-- <el-row>
      <el-button size="mini" type="primary" @click="dialog_newly = true" icon="el-icon-folder-add">新增</el-button>
    </el-row>
    <el-divider></el-divider> -->
    <!-- 表格 -->
    <el-table size="medium" :data="tableData" tooltip-effect="dark" style="width: 100%" border>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
      <el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
      <el-table-column label="开放时间设置" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="updateTime(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 表格 -->
    <el-table size="medium" :data="tableDataSwitch" tooltip-effect="dark" style="width: 100%;margin-top:20px;" border>
      <el-table-column prop="name" label="名称" align="center"></el-table-column>
      <el-table-column label="超时天数" align="center">
        <template slot-scope="scope">
          <el-input-number v-model="scope.row.days" @change="handleChangeDay(scope.row)" :min="0"
            :max="10"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="handle" label="状态" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.disjunctor" @change="updateSwitchState(scope.row)" active-text="开启"
            inactive-text="关闭">
          </el-switch>
        </template>
      </el-table-column>

    </el-table>




    <el-dialog title="添加" :visible.sync="dialog_newly">
      <el-form :model="formNew" :label-position="labelPosition" label-width="100px" style="margin-left:20%;">
        <el-form-item label="类型">
          <el-radio-group v-model="formNew.type">
            <el-radio label="时间段类型"></el-radio>
            <el-radio label="开关类型"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="名称 :">
          <el-input v-model="formNew.name" style="width:60%" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item label="超时天数 :" v-show="formNew.type == '开关类型'">
          <el-input v-model="formNew.days" style="width:60%" placeholder="请输入" clearable></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_newly = false">取 消</el-button>
        <el-button type="primary" @click="addSwitch" class="dialogbutton">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改" :visible.sync="dialog_change">
      <el-form :model="formChange" :label-position="labelPosition" label-width="80px" style="margin-left:20%;">
        <el-form-item label="开始时间 :">
          <el-date-picker v-model="formChange.startTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间 :">
          <el-date-picker v-model="formChange.endTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog_change = false">取 消</el-button>
        <el-button type="primary" @click="updateTimeConfirm" class="dialogbutton">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>



<script>
import { getSwitch, addSwitch, updateSwitch } from '_api/OpenManage/index.js'

export default {
  data() {
    return {
      labelPosition: "left",
      dialog_change: false,
      dialog_newly: false,
      tableData: [],
      form: {
        current: 0,
        pageSize: 10,
        type: 1
      },
      tableDataSwitch: [],
      formSwitch: {
        current: 0,
        pageSize: 10,
        type: 2
      },
      formNew: {
        name: "",
        type: "时间段类型",
        days: ""
      },
      formChange: {
        id: "",
        startTime: "",
        endTime: ""
      },
    }
  },
  methods: {
    updateSwitchState(e) {
      // console.log(e);
      var state = ""
      if (e.disjunctor) {
        state = 0
      } else {
        state = 1
      }
      updateSwitch(
        {
          id: e.id,
          state
        }
      ).then(res => {
        if (res.status == 200) {
          this.$message({
            message: '修改成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getSwitch()
            }
          })
        }
      })
    },
    handleChangeDay(e) {
      console.log(e);
      updateSwitch(
        {
          id: e.id,
          days: e.days
        }
      ).then(res => {
        if (res.status == 200) {
          this.$message({
            message: '修改成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getSwitch()
            }
          })
        }
      })
    },
    updateTime(e) {
      this.dialog_change = true
      this.formChange.id = e.id
      this.formChange.startTime = e.startTime
      this.formChange.endTime = e.endTime

    },
    // 修改
    updateTimeConfirm(e) {
      updateSwitch(this.formChange).then(res => {
        if (res.status == 200) {
          this.dialog_change = false
          this.$message({
            message: '修改成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getSwitch()
            }
          })
        }
      })
    },
    // 添加
    addSwitch() {
      if (this.formNew.type == '时间段类型') {
        this.formNew.type = 1
      } else {
        this.formNew.type = 2
      }
      addSwitch(this.formNew).then(res => {
        if (res.data.success == true) {
          this.dialog_newly = false
          this.$message({
            message: '添加成功!',
            duration: 1000,
            type: 'success',
            onClose: () => {
              this.getSwitch()
            }
          })
        } else {
          this.$message(res.data.message)
        }
      })
    },

    // 查询
    getSwitch() {
      getSwitch(
        this.form
      ).then(res => {
        if (res.data.success == true) {
          this.tableData = res.data.data.list
          this.getSwitchAnother()
        } else {
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    },
    // 查询
    getSwitchAnother() {
      getSwitch(
        this.formSwitch
      ).then(res => {
        if (res.data.success == true) {
          res.data.data.list.forEach(item => {
            if (item.disjunctor == 0) {
              item.disjunctor = true
            } else {
              item.disjunctor = false
            }
          })
          this.tableDataSwitch = res.data.data.list
        } else {
          this.$message({
            message: res.data.message,
            duration: 1000
          })
        }
      })
    }
  },
  created() {
    this.getSwitch()
  },
};
</script>
<style lang="scss" scoped>
.pagination {
  float: right;
  margin-top: 10px;
}
</style>
